<template>
  <view class="interest-container">
    <!-- 顶部栏 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">兴趣类别</text>
      <view class="save-btn" @tap="savePreferences">
        <text class="save-text">保存</text>
      </view>
    </view>
    
    <!-- 介绍说明 -->
    <view class="intro-section">
      <text class="intro-title">选择您感兴趣的内容</text>
      <text class="intro-text">
        我们将根据您的兴趣推荐更符合您口味的广告内容
        选择的类别越多，推荐的广告越精准
      </text>
    </view>
    
    <!-- 分类标签组 -->
    <view class="categories-section">
      <text class="section-title">热门分类</text>
      <view class="category-tags">
        <view 
          class="tag-item"
          :class="{ 'selected': selectedCategories.includes(category.id) }"
          v-for="category in hotCategories"
          :key="category.id"
          @tap="toggleCategory(category.id)"
        >
          <text class="tag-icon">{{ category.icon }}</text>
          <text class="tag-text">{{ category.name }}</text>
          <text class="check-icon" v-if="selectedCategories.includes(category.id)">✓</text>
        </view>
      </view>
    </view>
    
    <view class="categories-section">
      <text class="section-title">更多分类</text>
      <view class="category-tags">
        <view 
          class="tag-item"
          :class="{ 'selected': selectedCategories.includes(category.id) }"
          v-for="category in moreCategories"
          :key="category.id"
          @tap="toggleCategory(category.id)"
        >
          <text class="tag-icon">{{ category.icon }}</text>
          <text class="tag-text">{{ category.name }}</text>
          <text class="check-icon" v-if="selectedCategories.includes(category.id)">✓</text>
        </view>
      </view>
    </view>
    
    <!-- 已选类别统计 -->
    <view class="selected-count">
      <text class="count-text">已选择 {{ selectedCategories.length }} 个兴趣类别</text>
    </view>
    
    <!-- 底部操作 -->
    <view class="bottom-actions">
      <button class="select-all-btn" @tap="selectAll">全选</button>
      <button class="clear-all-btn" @tap="clearAll">清除全部</button>
    </view>
    
    <!-- 推荐说明 -->
    <view class="recommendation-tips">
      <text class="tips-title">为什么设置兴趣类别？</text>
      <view class="tips-content">
        <text class="tips-item">1. 帮助我们了解您的兴趣爱好</text>
        <text class="tips-item">2. 为您提供更精准的广告推荐</text>
        <text class="tips-item">3. 减少不相关广告的打扰</text>
        <text class="tips-item">4. 您可以随时修改这些设置</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 热门分类
      hotCategories: [
        { id: 'tech', name: '科技', icon: '📱' },
        { id: 'travel', name: '旅游', icon: '✈️' },
        { id: 'food', name: '美食', icon: '🍔' },
        { id: 'finance', name: '财经', icon: '💰' },
        { id: 'health', name: '健康', icon: '🏃' },
        { id: 'education', name: '教育', icon: '📚' },
        { id: 'sports', name: '体育', icon: '⚽' },
        { id: 'entertainment', name: '娱乐', icon: '🎬' }
      ],
      
      // 更多分类
      moreCategories: [
        { id: 'fashion', name: '时尚', icon: '👗' },
        { id: 'beauty', name: '美妆', icon: '💄' },
        { id: 'parenting', name: '育儿', icon: '👶' },
        { id: 'pets', name: '宠物', icon: '🐶' },
        { id: 'automotive', name: '汽车', icon: '🚗' },
        { id: 'realestate', name: '房产', icon: '🏠' },
        { id: 'career', name: '职场', icon: '💼' },
        { id: 'art', name: '艺术', icon: '🎨' },
        { id: 'music', name: '音乐', icon: '🎵' },
        { id: 'games', name: '游戏', icon: '🎮' },
        { id: 'photography', name: '摄影', icon: '📷' },
        { id: 'gardening', name: '园艺', icon: '🌱' }
      ],
      
      // 已选择的类别ID数组
      selectedCategories: []
    };
  },
  onLoad() {
    // 加载已保存的兴趣类别
    this.loadSavedCategories();
  },
  methods: {
    // 加载已保存的兴趣类别
    loadSavedCategories() {
      const savedCategories = uni.getStorageSync('selectedCategories');
      if (savedCategories !== '') {
        this.selectedCategories = JSON.parse(savedCategories);
      } else {
        // 如果没有保存的设置，默认选择几个热门类别
        this.selectedCategories = ['tech', 'food', 'health'];
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 切换类别选择状态
    toggleCategory(categoryId) {
      const index = this.selectedCategories.indexOf(categoryId);
      if (index > -1) {
        // 如果已选中，则取消选中
        this.selectedCategories.splice(index, 1);
      } else {
        // 如果未选中，则添加到已选择数组
        this.selectedCategories.push(categoryId);
      }
    },
    
    // 全选
    selectAll() {
      const allCategories = [...this.hotCategories, ...this.moreCategories];
      this.selectedCategories = allCategories.map(cat => cat.id);
      
      uni.showToast({
        title: '已选择所有类别',
        icon: 'success'
      });
    },
    
    // 清除全部
    clearAll() {
      uni.showModal({
        title: '清除选择',
        content: '确定要清除所有已选的兴趣类别吗？',
        confirmText: '确定',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.selectedCategories = [];
            
            uni.showToast({
              title: '已清除所有选择',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 保存偏好设置
    savePreferences() {
      // 保存到本地存储
      uni.setStorageSync('selectedCategories', JSON.stringify(this.selectedCategories));
      
      // 显示保存成功提示
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
      
      // 延迟返回上一页
      setTimeout(() => {
        this.goBack();
      }, 1500);
    }
  }
};
</script>

<style scoped>
.interest-container {
  height: 100vh;
  background-color: #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: 40rpx;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  padding: 10rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.save-btn {
  padding: 10rpx 20rpx;
}

.save-text {
  font-size: 32rpx;
  color: #07c160;
  font-weight: 600;
}

/* 介绍说明 */
.intro-section {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.intro-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.intro-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}

/* 分类区域 */
.categories-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

/* 分类标签组 */
.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.tag-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 40rpx;
  background-color: #fff;
  transition: all 0.3s ease;
  position: relative;
}

.tag-item.selected {
  border-color: #07c160;
  background-color: #f0f9f4;
}

.tag-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.tag-text {
  font-size: 28rpx;
  color: #333;
}

.check-icon {
  position: absolute;
  right: -10rpx;
  top: -10rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #07c160;
  color: #fff;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 已选类别统计 */
.selected-count {
  padding: 20rpx 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.count-text {
  font-size: 28rpx;
  color: #666;
}

/* 底部操作按钮 */
.bottom-actions {
  display: flex;
  justify-content: space-between;
  padding: 0 40rpx;
  margin-bottom: 40rpx;
}

.select-all-btn,
.clear-all-btn {
  flex: 1;
  padding: 25rpx;
  margin: 0 10rpx;
  font-size: 32rpx;
  border-radius: 10rpx;
  border: none;
}

.select-all-btn {
  background-color: #07c160;
  color: #fff;
}

.clear-all-btn {
  background-color: #ff4d4f;
  color: #fff;
}

/* 推荐说明 */
.recommendation-tips {
  padding: 40rpx;
  background-color: #fff;
}

.tips-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.tips-item {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
</style>